<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <el-form ref="formRef" label-position="left" :model="formModel" :rules="formRules" label-width="120px">
      <el-row>
        <el-col :sm="24">
          <el-form-item label="大楼" prop="buildingId">
            <el-select clearable class="w100" v-model="formModel.buildingId" placeholder="请选择大楼" autocomplete="off">
              <el-option v-for="item in buildingStore.bildingList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="楼层名称" prop="floor">
            <el-input clearable class="w100" v-model.trim="formModel.floor" autocomplete="off" placeholder="请输入大楼名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="楼层排序" >
            <el-input-number  class="w100 t-l" placeholder="请输入楼层排序"  v-model.trim="formModel.sort" :min="0" :max="999999" />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" plain @click="onCancel()">取消</el-button>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 管理员编辑组件
 */
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { getNewObj } from '@/utils/EsCommon';
import useBuildingStore from '@/stores/useBuildingStore';
// ======================================================
//                      变量声明
// ======================================================
const buildingStore = useBuildingStore();
// emit
const emit = defineEmits(['success']);
// 表单数据
const formAttrs = {
  id: 0,
  floor: '',
  buildingId: '',
  sort: 0
};

const formModel = ref(Object.assign({}, formAttrs));
// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '600px',
})
// 表单组件的引用实例
const formRef = ref(null);

// 选项数据
const bildingList = ref([]);
// 表单校验规则
const formRules = ref({
  floor: [
    { required: true, message: '请输入大楼名称', trigger: 'blur' },
  ],
  buildingId: [{ required: true, trigger: "blur", message: "请选择大楼" }],
  // sort: [{ required: true, trigger: "blur", message: "请输入楼层排序" }],

})

// ======================================================
//                      点击操作
// ======================================================

// 点击提交按钮
const onSubmit = () => {
  formRef.value.validate((valid, fields) => {
    if (!valid) {
      console.log('表单校验失败：', fields);
      return;
    }
    let params = {
      floor: formModel.value.floor,
      buildingId: Number(formModel.value.buildingId),
      sort: Number(formModel.value.sort)
    }
    if (formModel.value.id > 0) {
      params.id = formModel.value.id
    }
    EsAjax.post(ApiUrls.floorEdit + formModel.value.id, params).then(res => {
      if (res.data.code != 200) {
        ElMessage.warning(res.data.msg + res.data.data);
        return;
      }
      dialogInfo.value.visible = false;
      ElMessage.success('操作成功');
      emit('success');
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })
  })
}

// 点击取消按钮
const onCancel = () => {
  formModel.value = Object.assign({}, formAttrs);
  formRef.value.resetFields();
  dialogInfo.value.visible = false;
}
// ======================================================
//                      处理事件
// ======================================================

// 加载数据
const show = async (id, title, item = null, width = '600px') => {
  console.log(item)
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;
  formModel.value = Object.assign({}, formAttrs)
  // 加载详情数据
  if (id) {
    formModel.value = Object.assign({ ...formAttrs }, getNewObj(item));
  }
  console.log(formModel.value)

  // 加载大楼数据
  buildingStore.getBuildList()
}

defineExpose({
  show
})
</script>

<style scoped>
:deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
